കസ്റ്റം പ്രോപ്പർട്ടി ടൈപ്പുകൾ നിർവചിക്കുന്നതിനും, നൂതന സ്റ്റൈലിംഗ്, ആനിമേഷനുകൾ, സുഗമമായ ട്രാൻസിഷനുകൾ എന്നിവ പ്രവർത്തനക്ഷമമാക്കുന്നതിനും CSS @property-യുടെ ശക്തി കണ്ടെത്തുക. ഈ ഗൈഡ് സിന്റാക്സ്, ഉപയോഗം, ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിനായുള്ള പ്രായോഗിക ഉദാഹരണങ്ങൾ എന്നിവ ഉൾക്കൊള്ളുന്നു.
സി‌എസ്‌എസ് മാന്ത്രികതയുടെ താക്കോൽ: @property-യെയും കസ്റ്റം പ്രോപ്പർട്ടി ടൈപ്പ് ഡെഫനിഷനുകളെയും കുറിച്ചൊരു ആഴത്തിലുള്ള പഠനം
സി‌എസ്‌എസ് കസ്റ്റം പ്രോപ്പർട്ടികൾ (സി‌എസ്‌എസ് വേരിയബിൾസ് എന്നും അറിയപ്പെടുന്നു) നമ്മൾ സി‌എസ്‌എസ് എഴുതുന്നതിലും പരിപാലിക്കുന്നതിലും വിപ്ലവം സൃഷ്ടിച്ചു. അവ പുനരുപയോഗം, വഴക്കം, പരിപാലനക്ഷമത എന്നിവ വാഗ്ദാനം ചെയ്യുന്നു, നമ്മുടെ സ്റ്റൈൽഷീറ്റുകളെ കൂടുതൽ ചലനാത്മകവും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമാക്കുന്നു. എന്നിരുന്നാലും, അടുത്തിടെ വരെ, കസ്റ്റം പ്രോപ്പർട്ടികൾക്ക് അവയുടെ പ്രതീക്ഷിക്കുന്ന ഡാറ്റാ ടൈപ്പുകൾ നിർവചിക്കാനുള്ള കഴിവില്ലായിരുന്നു, ഇത് നൂതന സ്റ്റൈലിംഗിനും ആനിമേഷനുകൾക്കുമുള്ള സാധ്യതകളെ പരിമിതപ്പെടുത്തി. ഇതിനൊരു പരിഹാരമാണ് @property റൂൾ - നമ്മുടെ കസ്റ്റം പ്രോപ്പർട്ടികളുടെ ടൈപ്പ്, സിന്റാക്സ്, പ്രാരംഭ മൂല്യം എന്നിവ വ്യക്തമായി നിർവചിക്കാൻ അനുവദിക്കുന്ന ഒരു ഗെയിം-ചേഞ്ചർ.
എന്താണ് @property റൂൾ?
@property റൂൾ, സി‌എസ്‌എസ് ഹൂഡിനി എപിഐ കുടുംബത്തിന്റെ ഭാഗമാണ്, ഇത് സി‌എസ്‌എസ് എഞ്ചിന്റെ ആന്തരിക പ്രവർത്തനങ്ങൾ ഡെവലപ്പർമാർക്ക് മുന്നിൽ തുറന്നുകാട്ടാൻ ലക്ഷ്യമിടുന്നു. പ്രത്യേകമായി, @property കസ്റ്റം പ്രോപ്പർട്ടീസ് ആൻഡ് വാല്യൂസ് എപിഐയുടെ ഭാഗമാണ്. ഇത് ഒരു കസ്റ്റം പ്രോപ്പർട്ടി ബ്രൗസറിൽ രജിസ്റ്റർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അതിൽ താഴെ പറയുന്നവ വ്യക്തമാക്കാം:
- പേര്: കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പേര് (ഉദാഹരണത്തിന്,
--my-color). - സിന്റാക്സ്: പ്രോപ്പർട്ടിയുടെ പ്രതീക്ഷിക്കുന്ന ഡാറ്റാ ടൈപ്പ് (ഉദാഹരണത്തിന്,
<color>,<number>,<length>). - ഇൻഹെറിറ്റ്സ്: പ്രോപ്പർട്ടി അതിന്റെ മൂല്യം പാരന്റ് എലമെന്റിൽ നിന്ന് ഇൻഹെറിറ്റ് ചെയ്യണമോ എന്ന് (
trueഅല്ലെങ്കിൽfalse). - പ്രാരംഭ മൂല്യം: മറ്റൊരു മൂല്യം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ പ്രോപ്പർട്ടിയുടെ ഡിഫോൾട്ട് മൂല്യം.
ഈ സ്വഭാവവിശേഷങ്ങൾ നിർവചിക്കുന്നതിലൂടെ, കസ്റ്റം പ്രോപ്പർട്ടികൾ എങ്ങനെ ഉപയോഗിക്കപ്പെടുന്നു, അവ എങ്ങനെ പ്രവർത്തിക്കുന്നു, പ്രത്യേകിച്ച് ആനിമേഷനുകളിലും ട്രാൻസിഷനുകളിലും നിങ്ങൾക്ക് കൂടുതൽ നിയന്ത്രണം ലഭിക്കുന്നു.
@property എന്തിന് ഉപയോഗിക്കണം? ഗുണങ്ങൾ
@property ഉപയോഗിക്കുന്നത് നിരവധി പ്രധാന നേട്ടങ്ങൾ നൽകുന്നു:
1. ടൈപ്പ് സുരക്ഷയും മൂല്യനിർണ്ണയവും
@property ഇല്ലാതെ, സി‌എസ്‌എസ് എല്ലാ കസ്റ്റം പ്രോപ്പർട്ടികളെയും സ്ട്രിംഗുകളായി കണക്കാക്കുന്നു. ഇത് നിർദ്ദിഷ്ട ഡാറ്റാ ടൈപ്പുകൾ ആവശ്യമുള്ള കണക്കുകൂട്ടലുകളിലോ ആനിമേഷനുകളിലോ ഉപയോഗിക്കാൻ ശ്രമിക്കുമ്പോൾ അപ്രതീക്ഷിത ഫലങ്ങൾക്ക് കാരണമായേക്കാം. ഉദാഹരണത്തിന്, ഒരു കസ്റ്റം പ്രോപ്പർട്ടി ഒരു സംഖ്യയെ പ്രതിനിധീകരിക്കാൻ നിങ്ങൾ ഉദ്ദേശിക്കുന്നുവെങ്കിലും അബദ്ധത്തിൽ അതിന് ഒരു സ്ട്രിംഗ് മൂല്യം നൽകിയാൽ, നിങ്ങളുടെ ആനിമേഷനുകൾ തകരാറിലാകുകയോ തെറ്റായ ഫലങ്ങൾ നൽകുകയോ ചെയ്യാം.
കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പ്രതീക്ഷിക്കുന്ന സിന്റാക്സ് (ഡാറ്റാ ടൈപ്പ്) വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിച്ചുകൊണ്ട് @property ഇത് പരിഹരിക്കുന്നു. ബ്രൗസർ പിന്നീട് നൽകിയിട്ടുള്ള മൂല്യം ഈ സിന്റാക്സുമായി താരതമ്യം ചെയ്ത് പരിശോധിക്കും, അത് പ്രതീക്ഷിക്കുന്ന ടൈപ്പുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കും. മൂല്യം സിന്റാക്സുമായി പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ, ബ്രൗസർ പ്രാരംഭ മൂല്യം (നൽകിയിട്ടുണ്ടെങ്കിൽ) ഉപയോഗിക്കുകയോ പ്രോപ്പർട്ടിയെ അസാധുവായി കണക്കാക്കുകയോ ചെയ്യും.
2. സുഗമമായ ആനിമേഷനുകളും ട്രാൻസിഷനുകളും
@property-യുടെ യഥാർത്ഥ ശക്തി പ്രകടമാകുന്നത് ആനിമേഷനുകളുടെയും ട്രാൻസിഷനുകളുടെയും കാര്യത്തിലാണ്. ഇത് കൂടാതെ, കസ്റ്റം പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നത് ബുദ്ധിമുട്ടാണ്, കാരണം ഒരു സാധാരണ സ്ട്രിംഗിന്റെ വ്യത്യസ്ത മൂല്യങ്ങൾക്കിടയിൽ എങ്ങനെ ഇന്റർപോളേറ്റ് ചെയ്യണമെന്ന് ബ്രൗസറിന് അറിയില്ല. നിങ്ങൾ ആഗ്രഹിക്കുന്ന പ്രഭാവം നേടുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് ഹാക്കുകളോ പരിമിതമായ സി‌എസ്‌എസ് സവിശേഷതകളോ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം.
ഒരു കസ്റ്റം പ്രോപ്പർട്ടിയുടെ സിന്റാക്സ് നിർവചിക്കുന്നതിലൂടെ, ആനിമേഷനുകളിലും ട്രാൻസിഷനുകളിലും അതിന്റെ മൂല്യങ്ങൾക്കിടയിൽ എങ്ങനെ ഇന്റർപോളേറ്റ് ചെയ്യണമെന്ന് നിങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾ <color> സിന്റാക്സ് ഉപയോഗിച്ച് ഒരു കസ്റ്റം പ്രോപ്പർട്ടി നിർവചിക്കുകയാണെങ്കിൽ, സുഗമമായ ഒരു കളർ ഗ്രേഡിയന്റ് ഉപയോഗിച്ച് നിറങ്ങൾക്കിടയിൽ ഇന്റർപോളേറ്റ് ചെയ്യണമെന്ന് ബ്രൗസറിന് അറിയാം. അതുപോലെ, നിങ്ങൾ ഒരു പ്രോപ്പർട്ടി <number> സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിക്കുകയാണെങ്കിൽ, ഒരു ലീനിയർ പുരോഗതി ഉപയോഗിച്ച് സംഖ്യകൾക്കിടയിൽ ഇന്റർപോളേറ്റ് ചെയ്യണമെന്ന് ബ്രൗസറിന് അറിയാം.
3. മെച്ചപ്പെട്ട കോഡ് വായനാക്ഷമതയും പരിപാലനക്ഷമതയും
ഒരു കസ്റ്റം പ്രോപ്പർട്ടി ഏത് ഡാറ്റാ ടൈപ്പിനെയാണ് പ്രതിനിധീകരിക്കാൻ ഉദ്ദേശിക്കുന്നതെന്ന് വ്യക്തമാക്കുന്നതിലൂടെ @property നിങ്ങളുടെ സി‌എസ്‌എസ് കോഡിന്റെ വായനാക്ഷമതയും പരിപാലനക്ഷമതയും മെച്ചപ്പെടുത്തുന്നു. ഇത് മറ്റ് ഡെവലപ്പർമാർക്ക് (നിങ്ങളുടെ ഭാവിയിലെ നിങ്ങൾക്കും) പ്രോപ്പർട്ടിയുടെ ഉദ്ദേശ്യവും അത് എങ്ങനെ ഉപയോഗിക്കണം എന്നും മനസ്സിലാക്കാൻ സഹായിക്കുന്നു.
കൂടാതെ, ഒരു കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പ്രാരംഭ മൂല്യം വ്യക്തമായി നിർവചിക്കുന്നതിലൂടെ, മറ്റൊരു മൂല്യം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ ഉപയോഗിക്കപ്പെടുന്ന വ്യക്തമായ ഒരു ഫാൾബാക്ക് മൂല്യം നിങ്ങൾ നൽകുന്നു. ഇത് അപ്രതീക്ഷിതമായ ദൃശ്യപരമായ തകരാറുകൾ തടയാനും നിങ്ങളുടെ കോഡിനെ കൂടുതൽ കരുത്തുറ്റതാക്കാനും സഹായിക്കും.
4. മെച്ചപ്പെട്ട പ്രകടനം
ചില സന്ദർഭങ്ങളിൽ, @property ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ സി‌എസ്‌എസ് കോഡിന്റെ പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും. നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികളുടെ പ്രതീക്ഷിക്കുന്ന ഡാറ്റാ ടൈപ്പുകളെക്കുറിച്ച് ബ്രൗസറിന് കൂടുതൽ വിവരങ്ങൾ നൽകുന്നതിലൂടെ, റെൻഡറിംഗ് പ്രക്രിയ ഒപ്റ്റിമൈസ് ചെയ്യാൻ നിങ്ങൾ അതിനെ അനുവദിക്കുന്നു. ഇത് വേഗതയേറിയ ആനിമേഷനുകളിലേക്കും ട്രാൻസിഷനുകളിലേക്കും നയിക്കും, പ്രത്യേകിച്ച് സങ്കീർണ്ണമായ ലേഔട്ടുകളിൽ.
@property-യുടെ സിന്റാക്സ്
@property റൂൾ താഴെ പറയുന്ന സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിച്ചിരിക്കുന്നു:
@property --property-name {
syntax: <type>;
inherits: true | false;
initial-value: <value>;
}
ഓരോ ഘടകങ്ങളും നമുക്ക് വിശദമായി പരിശോധിക്കാം:
--property-name: നിങ്ങൾ നിർവചിക്കുന്ന കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പേരാണിത്. ഇത് രണ്ട് ഹൈഫനുകളിൽ (--) തുടങ്ങണം, കൂടാതെ സാധുവായ ഏത് സി‌എസ്‌എസ് ഐഡന്റിഫയർ പ്രതീകങ്ങളും ഇതിൽ അടങ്ങിയിരിക്കാം. ഉദാഹരണത്തിന്:--primary-color,--font-size,--spacing-unit.syntax: ഇത് കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പ്രതീക്ഷിക്കുന്ന ഡാറ്റാ ടൈപ്പ് വ്യക്തമാക്കുന്നു. ഇത് ഒരു സി‌എസ്‌എസ് വാല്യൂ ടൈപ്പ് ഡിസ്ക്രിപ്റ്റർ ഉപയോഗിച്ച് നിർവചിച്ചിരിക്കുന്നു. ചില സാധാരണ സിന്റാക്സ് മൂല്യങ്ങൾ ഇവയാണ്:<color>: ഒരു നിറത്തിന്റെ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.#ffffff,rgb(255, 255, 255),hsl(0, 0%, 100%),white).<number>: ഒരു സംഖ്യാ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.1,3.14,-42).<length>: ഒരു നീളത്തിന്റെ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.10px,2em,50vh,1rem).<percentage>: ഒരു ശതമാന മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.50%,100%,25.5%).<string>: ഒരു സ്ട്രിംഗ് മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ."Hello","World").<image>: ഒരു ചിത്രത്തിന്റെ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.url("image.jpg"),linear-gradient(...)).<angle>: ഒരു കോണിന്റെ മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു (ഉദാ.45deg,0.5rad,1turn).*: സാധുവായ ഏതൊരു സി‌എസ്‌എസ് മൂല്യത്തെയും പ്രതിനിധീകരിക്കുന്നു. ടൈപ്പ് ചെക്കിംഗിന്റെ ഉദ്ദേശ്യത്തെ പരാജയപ്പെടുത്തുന്നതിനാൽ ഇത് ജാഗ്രതയോടെ ഉപയോഗിക്കുക.- കസ്റ്റം സിന്റാക്സ്: റെഗുലർ എക്സ്പ്രഷൻ പോലുള്ള പാറ്റേണുകൾ ഉപയോഗിച്ച് സങ്കീർണ്ണമായ സിന്റാക്സുകൾ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
inherits: ഈ ബൂളിയൻ മൂല്യം കസ്റ്റം പ്രോപ്പർട്ടി അതിന്റെ മൂല്യം പാരന്റ് എലമെന്റിൽ നിന്ന് ഇൻഹെറിറ്റ് ചെയ്യണമോ എന്ന് തീരുമാനിക്കുന്നു.trueആയി സജ്ജമാക്കിയാൽ, പ്രോപ്പർട്ടി ഇൻഹെറിറ്റ് ചെയ്യും.falseആയി സജ്ജമാക്കിയാൽ, പ്രോപ്പർട്ടി ഇൻഹെറിറ്റ് ചെയ്യില്ല, കൂടാതെ എലമെന്റിൽ വ്യക്തമായി നിർവചിച്ചിട്ടില്ലെങ്കിൽ അതിന്റെ പ്രാരംഭ മൂല്യം ഉപയോഗിക്കും. ഡിഫോൾട്ട് മൂല്യംfalseആണ്.initial-value: ഇത് കസ്റ്റം പ്രോപ്പർട്ടിയുടെ ഡിഫോൾട്ട് മൂല്യം വ്യക്തമാക്കുന്നു. ഒരു എലമെന്റിൽ പ്രോപ്പർട്ടി വ്യക്തമായി സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ, അത് ഈ മൂല്യം ഉപയോഗിക്കും. പ്രാരംഭ മൂല്യം നിർദ്ദിഷ്ട സിന്റാക്സ് അനുസരിച്ച് സാധുവായ ഒരു മൂല്യമായിരിക്കണം. പ്രാരംഭ മൂല്യം നൽകിയിട്ടില്ലെങ്കിൽ, മറ്റ് മൂല്യങ്ങൾ സജ്ജമാക്കിയിട്ടില്ലെങ്കിൽ, പ്രോപ്പർട്ടിക്ക് അതിന്റെ അൺസെറ്റ് മൂല്യം ഉള്ളതായി കണക്കാക്കും.
പ്രവർത്തനത്തിലുള്ള @property-യുടെ പ്രായോഗിക ഉദാഹരണങ്ങൾ
നിങ്ങളുടെ സി‌എസ്‌എസ് കോഡിൽ @property എങ്ങനെ ഉപയോഗിക്കാമെന്നതിന്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നോക്കാം.
ഉദാഹരണം 1: ഒരു നിറം ആനിമേറ്റ് ചെയ്യുക
ഈ ഉദാഹരണത്തിൽ, നമ്മൾ --background-color എന്നൊരു കസ്റ്റം പ്രോപ്പർട്ടി ഉണ്ടാക്കുകയും സി‌എസ്‌എസ് ട്രാൻസിഷനുകൾ ഉപയോഗിച്ച് അത് ആനിമേറ്റ് ചെയ്യുകയും ചെയ്യും. ബ്രൗസർ നിറങ്ങൾക്കിടയിൽ ശരിയായി ഇന്റർപോളേറ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ നമ്മൾ സിന്റാക്സ് <color> ആയി നിർവചിക്കും.
@property --background-color {
syntax: <color>;
inherits: false;
initial-value: #ffffff; /* White */
}
.box {
width: 200px;
height: 200px;
background-color: var(--background-color);
transition: --background-color 0.5s ease-in-out;
}
.box:hover {
--background-color: #007bff; /* Blue */
}
ഈ കോഡിൽ:
- നമ്മൾ
--background-colorഎന്ന കസ്റ്റം പ്രോപ്പർട്ടി<color>സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിക്കുന്നു,inheritsfalseആയി സജ്ജമാക്കുന്നു,initial-valueവെള്ള നിറമായി (#ffffff) സജ്ജമാക്കുന്നു. - ഈ പ്രോപ്പർട്ടി
var(--background-color)ഉപയോഗിച്ച്.boxഎലമെന്റിന്റെbackground-color-ലേക്ക് പ്രയോഗിക്കുന്നു. - മൂല്യം മാറുമ്പോൾ സുഗമമായി ആനിമേറ്റ് ചെയ്യുന്നതിനായി
--background-colorപ്രോപ്പർട്ടിയിൽ ഒരു ട്രാൻസിഷൻ ചേർക്കുന്നു. - ഹോവർ ചെയ്യുമ്പോൾ
--background-color-ന്റെ മൂല്യം നീലയായി (#007bff) മാറ്റുന്നു, ഇത് ഒരു സുഗമമായ കളർ ട്രാൻസിഷൻ പ്രഭാവം സൃഷ്ടിക്കുന്നു.
ഉദാഹരണം 2: ഒരു സംഖ്യ ആനിമേറ്റ് ചെയ്യുക
ഈ ഉദാഹരണത്തിൽ, നമ്മൾ --blur-radius എന്നൊരു കസ്റ്റം പ്രോപ്പർട്ടി ഉണ്ടാക്കുകയും സി‌എസ്‌എസ് ട്രാൻസിഷനുകൾ ഉപയോഗിച്ച് അത് ആനിമേറ്റ് ചെയ്യുകയും ചെയ്യും. ബ്രൗസർ നീളത്തിന്റെ മൂല്യങ്ങൾക്കിടയിൽ ശരിയായി ഇന്റർപോളേറ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ നമ്മൾ സിന്റാക്സ് <length> ആയി നിർവചിക്കും. ഈ ഉദാഹരണം നീളങ്ങൾ ഉപയോഗിക്കുന്നതിന്റെ ഒരു ജനപ്രിയ ഉപയോഗവും കാണിക്കുന്നു: പിക്സൽ മൂല്യങ്ങൾ. ഇത് മറ്റ് യൂണിറ്റ് തരങ്ങളിലേക്കും എളുപ്പത്തിൽ വിവർത്തനം ചെയ്യാൻ കഴിയും. പ്രാരംഭ മൂല്യം `0px` ആയി സജ്ജീകരിക്കുന്നത് നിർണായകമാണെന്നതും ശ്രദ്ധിക്കേണ്ടതാണ്, കാരണം ട്രാൻസിഷനുകൾ ശരിയായി നടപ്പിലാക്കാൻ ബ്രൗസറിന് ഒരു അടിസ്ഥാന യൂണിറ്റ് ആവശ്യമാണ്.
@property --blur-radius {
syntax: <length>;
inherits: false;
initial-value: 0px;
}
.image {
width: 300px;
height: 200px;
background-image: url("image.jpg");
filter: blur(var(--blur-radius));
transition: --blur-radius 0.3s ease-in-out;
}
.image:hover {
--blur-radius: 5px;
}
ഈ കോഡിൽ:
- നമ്മൾ
--blur-radiusഎന്ന കസ്റ്റം പ്രോപ്പർട്ടി<length>സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിക്കുന്നു,inheritsfalseആയി സജ്ജമാക്കുന്നു,initial-value0pxആയി സജ്ജമാക്കുന്നു. - ഈ പ്രോപ്പർട്ടി
var(--blur-radius)ഉപയോഗിച്ച്.imageഎലമെന്റിന്റെfilter: blur()ഫംഗ്ഷനിലേക്ക് പ്രയോഗിക്കുന്നു. - മൂല്യം മാറുമ്പോൾ സുഗമമായി ആനിമേറ്റ് ചെയ്യുന്നതിനായി
--blur-radiusപ്രോപ്പർട്ടിയിൽ ഒരു ട്രാൻസിഷൻ ചേർക്കുന്നു. - ഹോവർ ചെയ്യുമ്പോൾ
--blur-radius-ന്റെ മൂല്യം5pxആയി മാറ്റുന്നു, ഇത് ഒരു സുഗമമായ ബ്ലർ പ്രഭാവം സൃഷ്ടിക്കുന്നു.
ഉദാഹരണം 3: ഇൻഹെറിറ്റഡ് പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ഒരു തീംഡ് യുഐ നിർമ്മിക്കുന്നു
ഈ ഉദാഹരണത്തിൽ, നമ്മൾ ഇൻഹെറിറ്റഡ് കസ്റ്റം പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ലളിതമായ ഒരു തീംഡ് യുഐ നിർമ്മിക്കും. നമ്മൾ --theme-color എന്നൊരു കസ്റ്റം പ്രോപ്പർട്ടി നിർവചിച്ച് അത് :root എലമെന്റിൽ സജ്ജീകരിക്കും. ഇത് എല്ലാ ചൈൽഡ് എലമെന്റുകൾക്കും തീം നിറം ഇൻഹെറിറ്റ് ചെയ്യാൻ അനുവദിക്കും.
@property --theme-color {
syntax: <color>;
inherits: true;
initial-value: #4caf50; /* Green */
}
:root {
--theme-color: #4caf50;
}
.button {
background-color: var(--theme-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
--theme-color: #388e3c; /* Darker Green */
}
ഈ കോഡിൽ:
- നമ്മൾ
--theme-colorഎന്ന കസ്റ്റം പ്രോപ്പർട്ടി<color>സിന്റാക്സ് ഉപയോഗിച്ച് നിർവചിക്കുന്നു,inheritstrueആയി സജ്ജമാക്കുന്നു,initial-valueപച്ചയായി (#4caf50) സജ്ജമാക്കുന്നു. :rootഎലമെന്റിൽ--theme-color-ന്റെ മൂല്യം സജ്ജീകരിക്കുന്നു, ഇത് ഡോക്യുമെന്റിലെ എല്ലാ എലമെന്റുകൾക്കും ലഭ്യമാക്കുന്നു.- ഈ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഒരു
.buttonഎലമെന്റിന്റെbackground-colorസജ്ജീകരിക്കുന്നു. - ഹോവർ ചെയ്യുമ്പോൾ
--theme-color-ന്റെ മൂല്യം കടും പച്ചയായി (#388e3c) മാറ്റുന്നു, യുഐയുടെ തീം മാറ്റാൻ ഇൻഹെറിറ്റഡ് പ്രോപ്പർട്ടികൾ എങ്ങനെ എളുപ്പത്തിൽ അപ്ഡേറ്റ് ചെയ്യാമെന്ന് കാണിക്കുന്നു.
ഉദാഹരണം 4: ഒരു കസ്റ്റം സിന്റാക്സ് നിർവചിക്കുന്നു
കൂടുതൽ സങ്കീർണ്ണമായ മൂല്യങ്ങൾ സാധൂകരിക്കുന്നതിന് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമായ, കൂടുതൽ വ്യക്തമായ ഒരു പാറ്റേൺ നിർവചിക്കാൻ syntax പ്രോപ്പർട്ടിക്ക് ഒരു സ്ട്രിംഗും സ്വീകരിക്കാൻ കഴിയും. ഈ സിന്റാക്സ് എം‌ഡി‌എൻ-ൽ (മോസില്ല ഡെവലപ്പർ നെറ്റ്‌വർക്ക്) ഡോക്യുമെന്റ് ചെയ്തിട്ടുള്ള ഒരു റെഗുലർ എക്സ്പ്രഷൻ പോലുള്ള സിസ്റ്റം ഉപയോഗിക്കുന്നു. `top`, `bottom`, `left`, `right` എന്നീ കീവേഡ് ഓപ്ഷനുകൾ സാധുവായ മൂല്യങ്ങളായി സ്വീകരിക്കുന്ന ഒരു ബാക്ക്ഗ്രൗണ്ട് പൊസിഷനായി ഒരു കസ്റ്റം സിന്റാക്സ് എങ്ങനെ നിർവചിക്കുകയും ഉപയോഗിക്കുകയും ചെയ്യാമെന്ന് ഈ ഉദാഹരണം വ്യക്തമാക്കുന്നു.
@property --background-position {
syntax: "[ top | bottom | left | right ]{1,2}";
inherits: false;
initial-value: top left;
}
.container {
width: 300px;
height: 300px;
background-image: url('image.jpg');
background-position: var(--background-position);
}
/* Valid positions */
.container.top-right {
--background-position: top right;
}
.container.bottom-left {
--background-position: bottom left;
}
/* Invalid position (will fallback to initial-value) */
.container.invalid {
--background-position: center;
}
ഇവിടെ, syntax സാധുവായ കീവേഡുകളുടെ ഒരു സ്ട്രിംഗ് റെപ്രസന്റേഷൻ ഉപയോഗിച്ച് വ്യക്തമാക്കുന്നു. `[ ]` നൊട്ടേഷൻ ഓപ്ഷനുകളുടെ ഒരു കൂട്ടത്തെ നിർവചിക്കുന്നു, `|` ചിഹ്നം അവയെ വേർതിരിക്കുന്നു, കൂടാതെ `{1,2}` അനുവദനീയമായ മൂല്യങ്ങളുടെ എണ്ണം ഒന്നോ രണ്ടോ കീവേഡുകളായി പരിമിതപ്പെടുത്തുന്നു. `center` പോലുള്ള അസാധുവായ ഒരു മൂല്യം ഉപയോഗിക്കുകയാണെങ്കിൽ, ബ്രൗസർ `top left` എന്ന initial-value-ലേക്ക് മടങ്ങും.
ബ്രൗസർ പിന്തുണ
@property-ക്കുള്ള ബ്രൗസർ പിന്തുണ ആധുനിക ബ്രൗസറുകളിൽ പൊതുവെ നല്ലതാണ്, അവയിൽ ഉൾപ്പെടുന്നവ:
- Chrome (പതിപ്പ് 64-ഉം അതിനുമുകളിലും)
- Edge (പതിപ്പ് 79-ഉം അതിനുമുകളിലും - ക്രോമിയം അടിസ്ഥാനമാക്കി)
- Firefox (പതിപ്പ് 72-ഉം അതിനുമുകളിലും)
- Safari (പതിപ്പ് 14.1-ഉം അതിനുമുകളിലും)
എന്നിരുന്നാലും, നിങ്ങൾ ഉപയോഗിക്കുന്ന സവിശേഷതകൾ നിങ്ങളുടെ ഉപയോക്താക്കൾ ഉപയോഗിക്കാൻ സാധ്യതയുള്ള ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ Can I use... പോലുള്ള വെബ്സൈറ്റുകളിലെ ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത പട്ടികകൾ പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും നല്ലതാണ്.
@property പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്ക്, ബ്രൗസർ @property റൂളിനെ അവഗണിക്കുകയും കസ്റ്റം പ്രോപ്പർട്ടിയെ ഒരു സാധാരണ സി‌എസ്‌എസ് വേരിയബിളായി കണക്കാക്കുകയും ചെയ്യും. ഇതിനർത്ഥം ആനിമേഷനുകളും ട്രാൻസിഷനുകളും പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിച്ചേക്കില്ല, പക്ഷേ കോഡ് ഇപ്പോഴും പ്രവർത്തനക്ഷമമായിരിക്കും.
@property ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ
@property ഉപയോഗിക്കുമ്പോൾ മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചില മികച്ച രീതികൾ ഇതാ:
- എല്ലായ്പ്പോഴും സിന്റാക്സ് നിർവചിക്കുക: ടൈപ്പ് സുരക്ഷ ഉറപ്പാക്കുന്നതിനും സുഗമമായ ആനിമേഷനുകളും ട്രാൻസിഷനുകളും പ്രവർത്തനക്ഷമമാക്കുന്നതിനും നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികളുടെ
syntaxഎല്ലായ്പ്പോഴും നിർവചിക്കുന്നത് ഉറപ്പാക്കുക. - ഒരു പ്രാരംഭ മൂല്യം സജ്ജമാക്കുക: ഒരു ഡിഫോൾട്ട് മൂല്യം നൽകുന്നതിനും അപ്രതീക്ഷിത ദൃശ്യപരമായ തകരാറുകൾ തടയുന്നതിനും ഒരു
initial-valueനൽകുക. - വിവരണാത്മകമായ പേരുകൾ ഉപയോഗിക്കുക: നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികൾക്ക് അവയുടെ ഉദ്ദേശ്യവും ഡാറ്റാ ടൈപ്പും വ്യക്തമായി സൂചിപ്പിക്കുന്ന വിവരണാത്മകമായ പേരുകൾ തിരഞ്ഞെടുക്കുക. ഉദാഹരണത്തിന്,
--colorഎന്നതിനുപകരം--button-background-colorഉപയോഗിക്കുക. - ഇൻഹെറിറ്റൻസ് പരിഗണിക്കുക: നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികൾ അവയുടെ പാരന്റ് എലമെന്റുകളിൽ നിന്ന് ഇൻഹെറിറ്റ് ചെയ്യണമോ വേണ്ടയോ എന്ന് തീരുമാനിക്കുക. തീം നിറങ്ങൾ അല്ലെങ്കിൽ ഫോണ്ട് സൈസുകൾ പോലുള്ള യുഐയിലുടനീളം പങ്കിടേണ്ട പ്രോപ്പർട്ടികൾക്കായി
inherits: trueഉപയോഗിക്കുക. - സമഗ്രമായി പരിശോധിക്കുക: നിങ്ങളുടെ കോഡ് പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വിവിധ ബ്രൗസറുകളിൽ പരിശോധിക്കുക.
@propertyപിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്ക് മെക്കാനിസങ്ങൾ ഉപയോഗിക്കുക. - നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികൾ ഡോക്യുമെന്റ് ചെയ്യുക: നിങ്ങളുടെ കസ്റ്റം പ്രോപ്പർട്ടികളുടെ ഉദ്ദേശ്യവും ഉപയോഗവും വിശദീകരിക്കാൻ നിങ്ങളുടെ സി‌എസ്‌എസ് കോഡിൽ അഭിപ്രായങ്ങൾ ചേർക്കുക. ഇത് മറ്റ് ഡെവലപ്പർമാർക്ക് (നിങ്ങളുടെ ഭാവിയിലെ നിങ്ങൾക്കും) നിങ്ങളുടെ കോഡ് മനസ്സിലാക്കാൻ എളുപ്പമാക്കും. സ്റ്റൈൽലിന്റ് പോലുള്ള ഉപകരണങ്ങളും ഈ മികച്ച രീതികൾ നടപ്പിലാക്കാൻ കോൺഫിഗർ ചെയ്യാൻ കഴിയും.
@property-യും സി‌എസ്‌എസ് ഹൂഡിനിയും
നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, @property സി‌എസ്‌എസ് ഹൂഡിനി എപിഐ കുടുംബത്തിന്റെ ഭാഗമാണ്. സി‌എസ്‌എസ് ഹൂഡിനി എന്നത് ഡെവലപ്പർമാർക്ക് സി‌എസ്‌എസ് എഞ്ചിന്റെ ആന്തരിക പ്രവർത്തനങ്ങൾ തുറന്നുകാട്ടുന്ന താഴ്ന്ന തലത്തിലുള്ള എപിഐകളുടെ ഒരു ശേഖരമാണ്, ഇത് കസ്റ്റം സവിശേഷതകളും പെരുമാറ്റങ്ങളും ഉപയോഗിച്ച് സി‌എസ്‌എസ് വികസിപ്പിക്കാൻ അവരെ അനുവദിക്കുന്നു.
മറ്റ് ഹൂഡിനി എപിഐകളിൽ ഉൾപ്പെടുന്നവ:
- പെയിന്റ് എപിഐ: ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കസ്റ്റം പശ്ചാത്തല ചിത്രങ്ങൾ, ബോർഡറുകൾ, മാസ്കുകൾ എന്നിവ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- ആനിമേഷൻ വർക്ക്‌ലെറ്റ് എപിഐ: ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഉയർന്ന പ്രകടനമുള്ള ആനിമേഷനുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- ലേഔട്ട് എപിഐ: ഗ്രിഡ് സിസ്റ്റങ്ങൾ അല്ലെങ്കിൽ മാസൺറി ലേഔട്ടുകൾ പോലുള്ള എലമെന്റുകൾക്കായി കസ്റ്റം ലേഔട്ട് അൽഗോരിതങ്ങൾ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- പാർസർ എപിഐ: ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് സി‌എസ്‌എസ് കോഡ് പാഴ്സ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു.
@property മറ്റ് ഹൂഡിനി എപിഐകളുമായി സംയോജിപ്പിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ശരിക്കും ശക്തവും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമായ സി‌എസ്‌എസ് പരിഹാരങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും.
ഉപസംഹാരം
@property റൂൾ സി‌എസ്‌എസിലെ ഒരു ശക്തമായ കൂട്ടിച്ചേർക്കലാണ്, ഇത് കസ്റ്റം പ്രോപ്പർട്ടി ടൈപ്പുകൾ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് നൂതന സ്റ്റൈലിംഗ്, ആനിമേഷനുകൾ, ട്രാൻസിഷനുകൾ എന്നിവ പ്രവർത്തനക്ഷമമാക്കുന്നു. @property ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ സി‌എസ്‌എസ് കോഡിന്റെ ടൈപ്പ് സുരക്ഷ, വായനാക്ഷമത, പരിപാലനക്ഷമത, പ്രകടനം എന്നിവ മെച്ചപ്പെടുത്താൻ കഴിയും.
ബ്രൗസർ പിന്തുണ പൊതുവെ നല്ലതാണെങ്കിലും, നിങ്ങളുടെ കോഡ് വിവിധ ബ്രൗസറുകളിൽ പരിശോധിക്കുകയും @property പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്ക് മെക്കാനിസങ്ങൾ നൽകുകയും ചെയ്യേണ്ടത് പ്രധാനമാണ്.
ഈ ലേഖനത്തിൽ വിവരിച്ചിട്ടുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, അതിശയകരമായ വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് @property-യുടെ ശക്തി ഉപയോഗിക്കാൻ കഴിയും.